<template>
  <div class="venue-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2 class="page-title">场地管理</h2>
      <el-button type="primary" icon="el-icon-plus" @click="showAddDialog = true">
        新增场地
      </el-button>
    </div>

    <!-- 搜索筛选区域 -->
    <el-card class="search-card" shadow="never">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="场地名称">
          <el-input v-model="searchForm.name" placeholder="请输入场地名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="场地类型">
          <el-select v-model="searchForm.type" placeholder="请选择场地类型" clearable>
            <el-option label="室内" :value="1"></el-option>
            <el-option label="室外" :value="2"></el-option>
            <el-option label="景区" :value="3"></el-option>
            <el-option label="酒店" :value="4"></el-option>
            <el-option label="古镇" :value="5"></el-option>
             <el-option label="" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="正常" :value="1"></el-option>
            <el-option label="维护中" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 场地列表 -->
    <el-card class="table-card" shadow="never">
      <el-table :data="venueList" v-loading="loading" stripe>
        <el-table-column prop="id" label="ID" width="120"></el-table-column>
        <el-table-column prop="name" label="场地名称" min-width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="type" label="场地类型" width="120">
          <template slot-scope="scope">
            <el-tag :type="getTypeTagType(scope.row.type)">{{ scope.row.typeName || getTypeLabel(scope.row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" min-width="200"></el-table-column>
        <el-table-column prop="phoneNumber" label="联系电话" width="130"></el-table-column>
        <el-table-column prop="openTime" label="营业时间" width="180"></el-table-column>
        <el-table-column prop="advanceBookingDay" label="提前预订天数" width="120">
          <template slot-scope="scope">
            {{ scope.row.advanceBookingDay }}天
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160">
           <template slot-scope="scope">
             {{ formatDate(scope.row.createTime, 'YYYY-MM-DD HH:mm') }}
           </template>
         </el-table-column>
        <el-table-column prop="status" label="状2态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'">
              {{ scope.row.statusName || (scope.row.status === 1 ? '正常' : '维护中') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isOpen" label="是否开放" width="100">
          <template slot-scope="scope">
            <el-switch :value="scope.row.isOpen === 1" @change="handleStatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="场地图片" width="100">
           <template slot-scope="scope">
             <div v-if="hasImages(scope.row.pictureList)" class="venue-images">
               <el-image
                 :src="buildImageUrl(scope.row.pictureList[0].url)"
                 :preview-src-list="getPreviewUrls(scope.row.pictureList)"
                 fit="cover"
                 style="width: 60px; height: 40px; border-radius: 4px; cursor: pointer;"
                 :title="`点击查看${getImageCount(scope.row.pictureList)}张图片`"
                 @error="handleImageError"
                 @click="handleImagePreview(scope.row.pictureList)">
                 <div slot="error" class="image-error">
                   <i class="el-icon-picture-outline"></i>
                 </div>
               </el-image>
               <span v-if="getImageCount(scope.row.pictureList) > 1" class="image-count">+{{ getImageCount(scope.row.pictureList) - 1 }}</span>
             </div>
             <div v-else class="no-image">
               <i class="el-icon-picture-outline"></i>
               <span>暂无图片</span>
             </div>
           </template>
         </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <div class="action-buttons">
              <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showAddDialog"
      width="600px"
      :close-on-click-modal="false">
      <el-form :model="venueForm" :rules="venueRules" ref="venueForm" label-width="100px">
        <el-form-item label="场地名称" prop="name">
          <el-input v-model="venueForm.name" placeholder="请输入场地名称"></el-input>
        </el-form-item>
        <el-form-item label="场地类型" prop="type">
          <el-select v-model="venueForm.type" placeholder="请选择场地类型" style="width: 100%">
            <el-option label="室内" :value="1"></el-option>
                        <el-option label="室外" :value="2"></el-option>
                        <el-option label="景区" :value="3"></el-option>
                        <el-option label="酒店" :value="4"></el-option>
                        <el-option label="古镇" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="venueForm.address" placeholder="请输入场地地址"></el-input>
        </el-form-item>
        <el-form-item label="场地描述" prop="description">
          <el-input v-model="venueForm.description" type="textarea" :rows="3" placeholder="请输入场地描述"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phoneNumber">
          <el-input v-model="venueForm.phoneNumber" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="营业时间" prop="openTime">
          <el-input v-model="venueForm.openTime" placeholder="例如：09:00-22:00"></el-input>
        </el-form-item>
        <el-form-item label="提前预订天数" prop="advanceBookingDay">
          <el-input-number v-model="venueForm.advanceBookingDay" :min="0" :max="30" style="width: 100%"></el-input-number>
        </el-form-item>
        <el-form-item label="开始预订时间" prop="startBookingTime">
          <el-time-picker v-model="venueForm.startBookingTime" placeholder="选择时间" style="width: 100%"></el-time-picker>
        </el-form-item>
        <el-form-item label="经纬度">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-input v-model="venueForm.latitude" placeholder="纬度"></el-input>
            </el-col>
            <el-col :span="12">
              <el-input v-model="venueForm.longitude" placeholder="经度"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">确定</el-button>
      </div>
    </el-dialog>

    <!-- 图片预览对话框 -->
    <el-dialog
      title="图片预览"
      :visible.sync="imagePreviewVisible"
      width="80%"
      :close-on-click-modal="true"
      center>
      <div class="image-preview-container">
        <el-carousel
          v-if="previewImageList.length > 1"
          :autoplay="false"
          indicator-position="outside"
          height="500px">
          <el-carousel-item v-for="(image, index) in previewImageList" :key="index">
            <div class="carousel-image-wrapper">
              <el-image
                :src="image"
                fit="contain"
                style="width: 100%; height: 500px;"
                :preview-src-list="previewImageList"
                :initial-index="index">
                <div slot="error" class="image-load-error">
                  <i class="el-icon-picture-outline"></i>
                  <p>图片加载失败</p>
                </div>
              </el-image>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div v-else-if="previewImageList.length === 1" class="single-image-wrapper">
          <el-image
            :src="previewImageList[0]"
            fit="contain"
            style="width: 100%; height: 500px;"
            :preview-src-list="previewImageList">
            <div slot="error" class="image-load-error">
              <i class="el-icon-picture-outline"></i>
              <p>图片加载失败</p>
            </div>
          </el-image>
        </div>
        <div v-else class="no-images">
          <i class="el-icon-picture-outline"></i>
          <p>暂无图片</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { venueAPI } from '../api/venue.js'
import { buildImageUrl, getPreviewUrls, hasImages, getImageCount, getDefaultImage, formatDate } from '@/utils'
import constant from '@/constant/constant'

export default {
  name: 'VenueManagement',
  data() {
    return {
      loading: false,
      submitting: false,
      showAddDialog: false,
      isEdit: false,
      searchForm: {
        name: '',
        type: '',
        status: ''
      },
      venueForm: {
        id: null,
        organizationId: 1,
        name: '',
        type: '',
        address: '',
        description: '',
        phoneNumber: '',
        openTime: '',
        status: 1,
        isOpen: true,
        advanceBookingDay: 7,
        startBookingTime: null,
        latitude: '',
        longitude: ''
      },
      venueRules: {
        name: [{ required: true, message: '请输入场地名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择场地类型', trigger: 'change' }],
        address: [{ required: true, message: '请输入场地地址', trigger: 'blur' }],
        phoneNumber: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        openTime: [{ required: true, message: '请输入营业时间', trigger: 'blur' }]
      },
      venueList: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      venueTypes: [],
      // 图片预览相关
      imagePreviewVisible: false,
      previewImageList: []
    }
  },
  computed: {
    dialogTitle() {
      return this.isEdit ? '编辑场地' : '新增场地'
    }
  },
  mounted() {
    this.loadVenueTypes()
    this.loadVenueList()
  },
  methods: {
    // 加载场地列表
    async loadVenueList() {
      this.loading = true
      try {
        const params = {
          current: this.pagination.current,
          size: this.pagination.size,
          name: this.searchForm.name || undefined,
          type: this.searchForm.type || undefined,
          status: this.searchForm.status || undefined
        }

        const result = await venueAPI.list(params)
        // 处理API返回的数据结构
        if (result.data) {
          this.venueList = result.data.records || []
          this.pagination.current = result.data.current || 1
          this.pagination.size = result.data.size || 10
          this.pagination.total = result.data.total || 0
        } else {
          // 兼容直接返回分页数据的情况
          this.venueList = result.records || []
          this.pagination.total = result.total || 0
        }
      } catch (error) {
        this.$message.error('加载场地列表失败: ' + error.message)
        // 如果API调用失败，使用模拟数据
        this.loadMockData()
      } finally {
        this.loading = false
      }
    },

    // 加载模拟数据（API调用失败时的备用方案）
    loadMockData() {
      const mockData = {
        current: this.pagination.current,
        size: this.pagination.size,
        total: 2,
        records: [
          {
            id: 1,
            name: '体育中心篮球场',
            type: 'basketball',
            address: '北京市朝阳区体育中心路1号',
            phoneNumber: '010-12345678',
            openTime: '06:00-22:00',
            status: 1,
            isOpen: true,
            advanceBookingDay: 7
          },
          {
            id: 2,
            name: '奥林匹克羽毛球馆',
            type: 'badminton',
            address: '北京市朝阳区奥林匹克公园',
            phoneNumber: '010-87654321',
            openTime: '08:00-21:00',
            status: 1,
            isOpen: true,
            advanceBookingDay: 5
          }
        ]
      }

      this.venueList = mockData.records
      this.pagination.total = mockData.total
    },

    // 加载场地类型
    async loadVenueTypes() {
      try {
        const types = await venueAPI.listVenueType()
        this.venueTypes = types || []
      } catch (error) {
        console.warn('加载场地类型失败，使用默认数据:', error.message)
        // 使用默认场地类型
        this.venueTypes = [
          { value: 'basketball', label: '室内' },
          { value: 'badminton', label: '室外' },
          { value: 'tennis', label: '酒店' },
          { value: 'football', label: '风景区' }
        ]
      }
    },

    // 模拟API调用
    mockApiCall() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
            data: {
              records: [
                {
                  id: 1,
                  name: '体育中心篮球场',
                  type: 'basketball',
                  address: '北京市朝阳区体育中心路1号',
                  phoneNumber: '010-12345678',
                  openTime: '06:00-22:00',
                  status: 1,
                  isOpen: true,
                  advanceBookingDay: 7
                },
                {
                  id: 2,
                  name: '奥林匹克羽毛球馆',
                  type: 'badminton',
                  address: '北京市朝阳区奥林匹克公园',
                  phoneNumber: '010-87654321',
                  openTime: '08:00-21:00',
                  status: 1,
                  isOpen: true,
                  advanceBookingDay: 5
                }
              ],
              total: 2
            }
          })
        }, 1000)
      })
    },

    // 搜索
    handleSearch() {
      this.pagination.current = 1
      this.loadVenueList()
    },

    // 重置
    handleReset() {
      this.searchForm = {
        name: '',
        type: '',
        status: ''
      }
      this.handleSearch()
    },

    // 编辑
    handleEdit(row) {
      this.isEdit = true
      this.venueForm = { ...row }
      this.showAddDialog = true
    },

    // 删除
    async handleDelete(row) {
    console.log(row.id)
      try {
        await this.$confirm('确认删除该场地吗？', '提示', {
          confirmButtonText: '确定1',
          cancelButtonText: '取消',
          type: 'warning'
        })
        const params = {
                    id: row.id || undefined,
                  }
        await venueAPI.removeByIds(params)
        this.$message.success('删除成功')
        this.loadVenueList()
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败: ' + error.message)
        }
      }
    },

    // 状态变更
   async handleStatusChange(row) {
     var isOpen = 0
     if(row.isOpen == 0){
       isOpen = 1
     }
     try {
         const params = {
                id: row.id,
            isOpen: isOpen
               }
          await venueAPI.update(params)
          console.log(row)
          this.$message.success('状态更新成功')
           this.loadVenueList()
      } catch (error) {
              if (error !== false) {
                this.$message.error('操作失败: ' + error.message)
              }
            } finally {
             // this.submitting = false
            }
    },

    // 提交表单
    async handleSubmit() {
      try {
       // await this.$refs.venueForm.validate()
        this.submitting = true
        const params = {

                    name: this.venueForm.name || undefined,
                    id: this.venueForm.id || undefined,
                    type: this.venueForm.type || undefined,
                    address: this.venueForm.address || undefined,
                    description: this.venueForm.description || undefined,
                    openTime: this.venueForm.openTime || undefined,
                    phoneNumber: this.venueForm.phoneNumber || undefined,
                    advanceBookingDay: this.venueForm.advanceBookingDay || undefined,
                    startBookingTime: this.venueForm.startBookingTime || undefined,
                    latitude: this.venueForm.latitude || undefined,
                    longitude: this.venueForm.longitude || undefined,
                    status: this.venueForm.status || undefined
                  }
        if (this.isEdit) {
          // 修改场地

          await venueAPI.update(params)
          console.log(this.venueForm.id);
          console.log(this.venueForm.name);
          this.$message.success('修改成功')
        } else {
          // 新增场地
          console.log(params);
          await venueAPI.save(params)

          this.$message.success('新增成功')
        }

        this.showAddDialog = false
        this.resetForm()
        this.loadVenueList()
      } catch (error) {
        if (error !== false) {
          this.$message.error('操作失败: ' + error.message)
        }
      } finally {
        this.submitting = false
      }
    },

    // 重置表单
    resetForm() {
      this.isEdit = false
      this.venueForm = {
        id: null,
        organizationId: 1,
        name: '',
        type: '',
        address: '',
        description: '',
        phoneNumber: '',
        openTime: '',
        status: 1,
        isOpen: true,
        advanceBookingDay: 7,
        startBookingTime: null,
        latitude: '',
        longitude: ''
      }
      this.$refs.venueForm && this.$refs.venueForm.resetFields()
    },

    // 分页
    handleSizeChange(size) {
      this.pagination.size = size
      this.loadVenueList()
    },

    handleCurrentChange(current) {
      this.pagination.current = current
      this.loadVenueList()
    },

    // 获取类型标签样式
    getTypeTagType(type) {
      // 支持数字类型ID和字符串类型
      const typeMap = {
        // 字符串类型
        basketball: 'success',
        badminton: 'primary',
        tennis: 'warning',
        football: 'info',
        // 数字类型ID
        1: 'success',  // 篮球
        2: 'primary',  // 羽毛球
        3: 'info',     // 足球
        4: 'danger',   // 乒乓球
        5: 'warning'   // 网球
      }
      return typeMap[type] || 'info'
    },

    // 获取类型标签文本
    getTypeLabel(type) {
      // 支持数字类型ID和字符串类型
      const typeMap = {
        // 字符串类型
        basketball: '篮球场',
        badminton: '羽毛球场',
        tennis: '网球场',
        football: '足球场',
        // 数字类型ID
        1: '篮球',
        2: '羽毛球',
        3: '足球',
        4: '乒乓球',
        5: '网球'
      }
      return typeMap[type] || type
    },

    // 图片处理相关方法
    buildImageUrl,
    getPreviewUrls,
    hasImages,
    getImageCount,
    getDefaultImage,

    // 日期格式化
    formatDate,

    // 处理图片加载错误
    handleImageError(e) {
      console.warn('图片加载失败:', e.target.src)
      // 可以在这里设置默认图片或其他处理逻辑
    },

    // 获取场地类型信息（从常量中）
    getVenueTypeInfo(type) {
      return constant.venueTypes[type] || { name: type, color: 'info' }
    },

    // 获取状态信息（从常量中）
    getStatusInfo(status) {
      return constant.statusTypes[status] || { name: '未知', color: 'info' }
    },

    // 处理图片预览
    handleImagePreview(pictureList) {
      if (pictureList && pictureList.length > 0) {
        this.previewImageList = this.getPreviewUrls(pictureList)
        this.imagePreviewVisible = true
      }
    }
  }
}
</script>


<style scoped>
.venue-management {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 4px;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1d39c4;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.search-card {
  margin-bottom: 20px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(29, 57, 196, 0.08);
}

.search-form {
  margin-bottom: 0;
}

.table-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(29, 57, 196, 0.08);
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: right;
}

.dialog-footer {
  text-align: right;
}

/* Element UI 样式覆盖 */
::v-deep .el-button--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

::v-deep .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

::v-deep .el-button--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

::v-deep .el-button--danger {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  border: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2);
}

::v-deep .el-button--danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
}

::v-deep .el-button--danger:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

::v-deep .el-button.el-button--mini {
  padding: 7px 12px;
  font-size: 12px;
  border-radius: 6px;
  font-weight: 500;
}

::v-deep .el-table .el-button + .el-button {
  margin-left: 8px;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
}

.action-buttons .el-button {
  margin: 0;
  min-width: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-buttons .el-button i {
  margin-right: 4px;
}

::v-deep .el-input__inner {
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

::v-deep .el-input__inner:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

::v-deep .el-select .el-input__inner {
  border-radius: 8px;
}

::v-deep .el-table {
  border-radius: 8px;
  overflow: hidden;
}

::v-deep .el-table th {
  background: linear-gradient(135deg, #f8f9ff 0%, #f1f3ff 100%);
  color: #1d39c4;
  font-weight: 600;
  border: none;
}

::v-deep .el-table td {
  border: none;
  border-bottom: 1px solid #f0f2f5;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #fafbff;
}

::v-deep .el-pagination {
  text-align: right;
}

::v-deep .el-pagination .el-pager li {
  border-radius: 6px;
  margin: 0 2px;
}

::v-deep .el-pagination .el-pager li.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

::v-deep .el-dialog {
  border-radius: 12px;
  overflow: hidden;
}

::v-deep .el-dialog__header {
  background: linear-gradient(135deg, #f8f9ff 0%, #f1f3ff 100%);
  padding: 20px 24px;
}

::v-deep .el-dialog__title {
  color: #1d39c4;
  font-weight: 600;
  font-size: 18px;
}

::v-deep .el-form-item__label {
  color: #1d39c4;
  font-weight: 500;
}

::v-deep .el-tag {
  border-radius: 6px;
  font-weight: 500;
}

::v-deep .el-switch.is-checked .el-switch__core {
  background-color: #667eea;
}

/* 场地图片样式 */
.venue-images {
  position: relative;
  display: inline-block;
}

.image-count {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 2px;
  line-height: 1;
}

.no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 40px;
  background: #f5f7fa;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  color: #999;
  font-size: 10px;
}

.no-image i {
  font-size: 16px;
  margin-bottom: 2px;
}

.image-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #999;
}

.image-error i {
  font-size: 20px;
}

/* 图片预览对话框样式 */
.image-preview-container {
  text-align: center;
}

.carousel-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
  background: #f8f9fa;
}

.single-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 8px;
}

.image-load-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.image-load-error i {
  font-size: 48px;
  margin-bottom: 10px;
}

.image-load-error p {
  margin: 0;
  font-size: 14px;
}

.no-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #999;
}

.no-images i {
  font-size: 64px;
  margin-bottom: 15px;
}

.no-images p {
  margin: 0;
  font-size: 16px;
}

::v-deep .el-carousel__indicator {
  background-color: rgba(0, 0, 0, 0.3);
}

::v-deep .el-carousel__indicator.is-active {
  background-color: #667eea;
}

@media (max-width: 768px) {
  .venue-management {
    padding: 10px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .search-form {
    display: block;
  }

  .search-form .el-form-item {
    display: block;
    margin-bottom: 15px;
  }
}
</style>
